<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--工号、开单/执行医生、名字、开单次数、支出-->
<style>
    body{
        width:100%;
        height:100%;
        background:#fff;
    }
    #hospitalcostreportTable{
        width:100%;
        height:100%;
    }
    #reporthospitalcostreportTable thead{
        text-align: center;
    }
    .icon{
        font-size: 50px;
        cursor:pointer;
        position:relative;
        top:8px;
        left:49%;
    }
    .iconColor{
        color:#1E9FFF;
    }
    .chart{
        display: none;
        position:absolute;
        top:10%;
    }
    #chartFrame ul{
        list-style: none;
        width:100%;
        height:50%;
    }
    #chartFrame ul li{
        float:left;
        width:50%;
    }
    #echart1{
        float:left;
        position:relative;
        width:500px;
        height:300px;

    }
    #echart2{
        float:left;
        position:relative;
        width:500px;
        height:300px;
    }
</style>
<link rel="stylesheet" href="../lib/layui-v2.1.6/layui/css/layui.css">
<body>
    <i class="layui-icon icon">&#xe62c;</i>
    <div class="table">
        <table class="layui-table" lay-skin="line row" id="hospitalcostreportTable" lay-filter="tableListen">
        </table>
    </div>
    <div class="chart">
        <div id="chartFrame">
            <ul>
                <li><div id="echart1"></div></li>
                <li><div id="echart2"></div></li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui-v2.1.6/layui/layui.js"></script>
<script type="text/javascript" src="../lib/echart/echarts.js"></script>
<script>
    //表格窗口自适应设置
    var tableWidth=window.innerWidth*0.198;
    var iconSize=window.innerHeight*0.05;

    //图表窗体自适应设置
    var echartsWidth = window.innerWidth*0.5+'px';
    var echartHeight = window.innerHeight*0.6+'px';
    var echartHeight2 = window.innerHeight*0.6+'px';
    var chartWidth = window.innerWidth*0.9+'px';
    var chartHeight = window.innerHeight*0.9+'px';
    $('#chartFrame').css({'height':chartHeight});
    $('#chartFrame').css({'weight':chartWidth});
    $('#echart1').css({'width':echartsWidth,'height':echartHeight});
    $('#echart2').css({'width':echartsWidth,'height':echartHeight2});

    var barChart=echarts.init(document.getElementById("echart1")); //左边柱状图
    var pieChart=echarts.init(document.getElementById("echart2")); //右边饼图
    var barOption; //左边柱状图 属性设置
    var pieOption; //右边饼图 属性设置


    layui.use(["table"],function () {
        var $=layui.jquery;
        var table=layui.table;

        $('.icon').css({'font-size':iconSize});
        initTable();//初始化表格数据 ps :请求参数写死的
        iconEvent();//切换视图图标时间;
        initChartData();//初始化图表数据

        //初始化表格数据 ps :请求参数写死的
        function initTable() {
            var rowInfo = JSON.parse(localStorage.getItem("rowInfo"));
            var clinicReport = JSON.parse(localStorage.getItem("clinicReport"));
            var param = {
                clinicId : rowInfo.clinicId,
                projectId : rowInfo.projectId,
                startTime : clinicReport.startTime,
                endTime : clinicReport.endTime,
            };
            table.render({
                elem: '#hospitalcostreportTable' //指定原始表格元素选择器（推荐id选择器),
                ,page:true
                ,limit:10
                ,center:true
                ,cols: [[
                    {field:'employeeCode',width:tableWidth,title:'工号',align:'center'},
                    {field:'type',width:tableWidth,title:'开单/执行医生',align:'center'},
                    {field:'name',width:tableWidth,title:'名字',align:'center'},
                    {field:'number',width:tableWidth,title:'开单/执行次数',align:'center'},
                    {field:'costPrice',width:tableWidth,title:'支出',sort:true,align:'center'}
                ]],
                url : "../reportController/getClinicSelfCostDetail",
                method : "post",
                where : param,
                response : {
                    statusName : "code", //数据状态的字段名称
                    statusCode : 200, //成功的状态码
                    countName: 'total', //数据总数的字段名称
                    msgName  : "msg", //状态信息的字段名称
                    dataName : "result" //数据列表的字段名称 
                }
            });
        }
        //窗口转换图标事件
        function iconEvent() {
            $('.icon').mouseenter(function(){
            $(this).addClass('iconColor');
            });
            $('.icon').mouseleave(function(){
                $(this).removeClass('iconColor');
            });

            //点击事件
            var iconNum=0;
            $('.icon').click(function(){
                if(iconNum%2==0){
                    $('.table').hide();
                    $('.chart').show();
                    $('.icon').html("&#xe62d;");
                    barChart.clear();
                    pieChart.clear();
                    //console.log(iconNum);   
                    //console.log(barOption);
                    //console.log(pieOption);
                    barChart.setOption(barOption);
                    pieChart.setOption(pieOption);
                }else{
                    $('.table').show();
                    $('.chart').hide();
                    $('.icon').html("&#xe62c;");
                }
                iconNum++;
            });
        }

        //初始化图标数据
        function initChartData() {
            //获取表格数据
            $(function(){
                //参数还未动态获取
                var rowInfo = JSON.parse(localStorage.getItem("rowInfo"));
                var clinicReport = JSON.parse(localStorage.getItem("clinicReport"));
                var param = {
                    clinicId : rowInfo.clinicId,
                    projectId : rowInfo.projectId,
                    startTime : clinicReport.startTime,
                    endTime : clinicReport.endTime,
                };
                $.ajax({
                    data : param,
                    url : "../reportController/getClinicSelfCostDetail",
                    type : "POST",
                    success : function(response) {
                        //console.log(response.result);
                        var data = response.result;
                        var doctorCost = 0.0;//医生总支出
                        var doctorNumber = 0;//医生开单总数
                        var excutorCost = 0.0;//执行医生总支出
                        var excutorNumber = 0;//执行医生执行治疗总次数
                        for(var i = 0;i < data.length;i++){
                            var rowInfo = data[i];//表中每一行的数据
                            //console.log("rowInfo");
                            //console.log(rowInfo);
                            //[costPrice,employeeCode,employeeId,name,number,type]
                            if(rowInfo.type=="开单医生") {
                                //console.log("开单医生");
                                //console.log(rowInfo.costPrice);
                                //console.log(rowInfo.number);
                                doctorCost = doctorCost + rowInfo.costPrice;
                                doctorNumber = doctorNumber + rowInfo.number;
                            }else {
                                //console.log("执行医生");
                                //console.log(rowInfo.costPrice);
                                //console.log(rowInfo.number);
                                excutorCost = excutorCost + rowInfo.costPrice;
                                excutorNumber = excutorNumber + rowInfo.number;
                            }
                        }

                        //console.log(doctorCost);
                        //console.log(excutorCost);
                        var costArray = [];
                        var numberArray = [];
                        var clinicName = JSON.parse(localStorage.getItem("rowInfo")).hospitalName;
                        costArray.push(doctorCost,excutorCost);
                        numberArray.push(doctorNumber,excutorNumber);
                        //设置柱状图属性
                        barOption={
                            title:{
                                text: clinicName,
                                left: '5%'
                            },
                            grid: { left: '5%',right: '4%',top:'15%',bottom:'1%',containLabel: true },
                            tooltip:{
                                trigger:'axis',
                                axisPointer:{
                                    type:'shadow'
                                }
                            },
                            legend:{
                                data:['支出','开单/执行总次数'],
                                top:'2%'
                            },
                            xAxis:{
                                data:['开单医生','执行医生']
                            },
                            yAxis:{
                                type:'value',
                            },
                            series:[
                                {
                                    name:'支出',
                                    type:'bar',
                                    data:costArray
                                },
                                {
                                    name:'开单/执行总次数',
                                    type:'bar',
                                    data:numberArray
                                }
                            ]
                        };
                        //设置饼图属性
                        pieOption={
                            title:{text:'费用比例图',left:'45%'},
                            legend: {
                                top:'90%',
                                left:'35%',
                                data:['开单医生总支出','执行医生总支出']
                            },
                            tooltip: {
                                trigger:'item',
                                axisPointer:{
                                    type:'shadow'
                                }
                            },
                            series:[
                                {
                                    name: '费用类型',
                                    type: 'pie',
                                    radius: '50%',
                                    itemStyle:{
                                        normal:{
                                            label:{
                                                show:true,
                                                position:'outside',
                                                formatter: '{b} : {d}%',
                                            },
                                        }
                                    },
                                    selectedOffset:'10',
                                    center: ['53%', '50%'],
                                    data:[
                                        {value:doctorCost, name:'开单医生总支出'},
                                        {value:excutorCost, name:'执行医生总支出'},
                                    ]

                                }
                            ]
                        };
                    }
                })
            });
        }
    });
</script>
</html>